<!-- 求职者首页组件 -->
<template>
    <div>
        <!-- 广告展示区域 -->
        <div id="advertisement"></div>
        <!-- 搜索区域 -->
        <div id="search" class="search-container">
            <SearchInput :address="address"></SearchInput>
            <!-- 热门职位标签区域 -->
            <div class="hot-tags">
                <span class="tag-label">热门职位：</span>
                <el-tag v-for="tag in hotTags" :key="tag" @click="handleJobClick(tag)" class="hot-tag">{{ tag
                }}</el-tag>
            </div>
        </div>
        <!-- 主要内容区域 -->
        <div id="content">
            <!-- 职位分类展示区域 -->
            <div class="job-categories">
                <div class="categories-container" @mouseleave="handleMouseLeave">
                    <!-- 左侧职位分类卡片 -->
                    <div class="left-panel">
                        <el-card v-for="([categoryName, categoryData], index) in currentPageCategories" :key="index"
                            class="category-card" style="box-shadow: none;"
                            @mouseenter.native.capture="handleMouseEnter(categoryName, categoryData)">
                            <div class="category-header">
                                <h3>{{ categoryName }}</h3>
                            </div>
                        </el-card>
                    </div>
                    <!-- 右侧详情/图片面板 -->
                    <div class="right-panel">
                        <div v-if="hoveredCategory.name" class="detail-content">
                            <div v-for="(subCategory, subCategoryName) in hoveredCategory.jobs" :key="subCategoryName"
                                class="sub-category-group">
                                <div class="sub-category-title">{{ subCategoryName }}</div>
                                <div class="sub-category-tags">
                                    <el-tag v-for="job in subCategory" :key="job" class="sub-category-tag"
                                        @click="handleJobClick(job)">
                                        {{ job }}
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                        <div v-else class="image-placeholder">
                            <img src="@/assets/ad.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- 分页信息 -->
                <div class="pagination-info"
                    style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                    <span>{{ currentPage }}/{{ totalPages }}</span>
                    <div>
                        <el-button :disabled="currentPage === 1" @click="handlePrevPage"
                            icon="el-icon-arrow-left">上一页</el-button>
                        <el-button :disabled="currentPage === totalPages" @click="handleNextPage"
                            icon="el-icon-arrow-right">下一页</el-button>
                    </div>
                </div>
            </div>

            <!-- 推荐区域 -->
            <selectedJob></selectedJob>

            <!-- 公司区域 -->
            <selectedCompany></selectedCompany>
        </div>
    </div>
</template>

<script>
// 导入API接口
import { getPopularJob, getJobCategories, getSelectedJob, getLatestJob, getHotJobs } from '@/util/seeker_api/homepage_api.js'
import SearchInput from '@/components/SearchInput.vue'
import selectedJob from '@/views/SeekerViews/HomePage/component/selectedJob.vue'
import selectedCompany from '@/views/SeekerViews/HomePage/component/selectedCompany.vue'
import { mapState } from 'vuex'

export default {
    name: "HomePage",
    components: {
        SearchInput,
        selectedJob,
        selectedCompany,
    },
    // 组件数据
    data() {
        return {
            jobType: '', // 选中的职位类型
            searchText: '', // 搜索框输入内容
            hotTags: ["互联网", "人工智能", "大数据", "软件测试", "UI/UX设计", "金融", "法律"], // 热门职位标签列表
            loading: false, // 加载状态
            currentPage: 1, // 当前页码
            pageSize: 8, // 每页显示的分类数量
            jobCategories: {
                "互联网/AI  前端开发  数据分析": {
                    "后端开发": ["Java", "C/C++", "PHP", "Python", "C#", ".NET", "Golang", "Node.js", "语音/视频/图形开发", "高性能计算工程师", "GIS工程师", "区块链工程师", "全栈工程师", "其他后端开发"],
                    "前端/移动开发": ["前端开发工程师", "Android", "iOS", "U3D", "UE4", "Cocos", "技术美术", "JavaScript", "鸿蒙开发工程师"],
                    "测试": ["测试工程师", "软件测试", "自动化测试", "功能测试", "测试开发", "硬件测试", "游戏测试", "性能测试", "渗透测试", "测试经理"],
                    "运维/技术支持": ["运维工程师", "IT技术支持", "网络工程师", "网络安全", "系统工程师", "运维开发工程师", "系统管理员", "DBA", "电脑/打印机维修", "系统安全", "技术文档工程师"],
                    "人工智能": ["图像算法", "自然语言处理算法", "大模型算法", "数据挖掘", "规控算法", "SLAM算法", "推荐算法", "搜索算法", "语音算法", "风控算法", "高性能计算工程师", "算法工程师", "算法研究员", "机器学习", "深度学习", "自动驾驶系统工程师", "数据标注/AI训练师"],
                    "销售技术支持": ["售前技术支持", "售后技术支持", "销售技术支持", "客户成功"],
                    "数据": ["数据分析师", "数据开发", "数据仓库", "ETL工程师", "数据挖掘", "数据架构师", "爬虫工程师", "数据采集", "数据治理"],
                    "技术项目管理": ["项目经理/主管", "实施工程师", "实施顾问", "需求分析工程师", "硬件项目经理", "项目专员/助理"],
                    "高端技术职位": ["技术经理", "架构师", "技术总监", "CTO/CIO", "技术合伙人", "运维总监"],
                    "其他技术职位": ["其他技术职位"]
                },
                "电子/电气/通信  集成电路": {
                    "电子/硬件开发": ["电子工程师", "硬件工程师", "嵌入式软件工程师", "FPGA开发", "单片机", "驱动开发工程师", "PCB工程师", "电子维修技术员", "射频工程师", "电路设计", "系统集成", "光学工程师", "DSP开发", "电源工程师", "电池工程师"],
                    "半导体/芯片": ["集成电路IC设计", "数字IC验证工程师", "模拟版图设计工程师", "芯片测试工程师", "DFT工程师", "FAE", "数字前端设计师", "数字后端工程师", "模拟IC设计工程师"],
                    "电气/自动化": ["电气工程师", "电气设计工程师", "自动化工程师", "机电工程师", "建筑机电工程师"],
                    "技术项目管理": ["项目经理/主管", "实施工程师", "实施顾问", "硬件项目经理", "项目专员/助理"],
                    "通信": ["通信项目专员", "通信项目经理", "通信技术工程师", "通信研发工程师", "数据通信工程师", "光网络工程师", "有线传输工程师", "核心网工程师", "通信标准化工程师", "网络工程师", "宽带装维", "无线/天线工程师"],
                    "销售技术支持": ["售前技术支持", "售后技术支持", "销售技术支持"],
                    "运维/技术支持": ["运维工程师", "系统工程师", "技术文档工程师"]
                },
                "产品  游戏策划  产品经理": {
                    "产品经理": ["产品经理", "产品专员/助理", "高级产品管理岗", "用户研究", "电商产品经理", "AI产品经理", "数据产品经理", "移动产品经理", "金融产品经理", "跨境电商产品开发", "化妆品产品经理", "硬件产品经理", "其他产品职位", "需求分析工程师"],
                    "游戏策划/制作": ["游戏策划", "系统策划", "游戏数值策划", "游戏制作人"]
                },
                "客服/运营  文案编辑  直播运营": {
                    "客服": ["客服专员", "客服主管", "客服经理", "网络客服", "电话客服", "售后客服", "售前客服"],
                    "内容运营": ["新媒体运营", "直播运营", "视频运营", "内容运营", "微信运营"],
                    "电商运营": ["国内电商运营", "跨境电商运营", "品类运营", "淘宝运营", "天猫运营", "京东运营", "拼多多运营", "亚马逊运营", "跨境电商产品开发", "阿里国际站运营", "速卖通运营"],
                    "业务运营": ["运营助理/专员", "产品运营", "用户运营", "商家运营", "数据/策略运营", "社区运营", "游戏运营", "活动运营", "网站运营", "内容审核", "数据标注/AI训练师", "外卖运营"],
                    "线下运营": ["车辆运营", "线下拓展运营", "商场运营"],
                    "编辑": ["文案编辑", "主编/副主编", "网站编辑", "医学编辑"],
                    "高端运营职位": ["运营经理/主管", "运营总监", "COO", "客服总监"],
                    "其他运营职位": ["其他运营职位"]
                },
                "销售  客户服务  售后支持": {
                    "销售": ["销售专员", "电话销售", "网络销售", "渠道销售", "大客户代表", "客户经理", "BD经理", "销售工程师"],
                    "销售管理": ["销售经理/主管", "销售总监", "销售VP", "城市经理", "区域总监"],
                    "销售行政/商务": ["销售助理", "销售运营", "商务专员", "商务经理", "商务总监", "招商", "客户成功"],
                    "外贸销售": ["外贸业务员", "外贸经理", "货代/物流销售", "海外销售"],
                    "教培销售": ["课程顾问", "留学顾问"],
                    "汽车销售": ["汽车销售", "汽车配件销售"],
                    "房地产销售/招商": ["置业顾问", "地产中介", "地产招商"],
                    "服务业销售": ["导购", "服装导购", "珠宝销售", "美容顾问", "化妆品导购", "家装导购", "会籍顾问", "旅游顾问"],
                    "医疗销售": ["医药代表", "医疗器械销售", "药店店员", "药店店长", "医美咨询", "健康顾问", "口腔咨询师"],
                    "广告/会展销售": ["广告销售", "会展活动销售", "会议活动销售"],
                    "金融销售": ["理财顾问", "保险顾问", "信用卡销售", "证券经纪人"],
                    "其他销售职位": ["其他销售职位"]
                },
                "人力/行政/法务  法务经理  律师": {
                    "人力资源": ["人力资源专员/助理", "人力资源经理/主管", "人力资源总监", "招聘", "HRBP", "培训", "员工关系", "组织发展", "企业文化", "薪酬绩效", "猎头顾问"],
                    "行政": ["行政专员/助理", "行政经理/主管", "行政总监", "前台", "后勤", "经理助理", "文员", "企业党建", "档案管理", "商务司机", "项目专员/助理"],
                    "法律服务": ["法务专员/助理", "法务经理/主管", "法务总监", "法律顾问", "律师"],
                    "其他职能职位": ["其他职能职位"]
                },
                "财务/审计/税务  财务  会计": {
                    "会计": ["会计", "总账会计", "成本会计", "结算会计", "税务外勤会计", "建筑/工程会计"],
                    "审计/税务": ["审计", "税务"],
                    "高级财务职位": ["财务经理/主管", "财务总监/VP", "CFO"],
                    "其他财务岗位": ["出纳", "风控", "财务顾问", "统计员", "财务分析/财务BP"]
                },
                "生产制造  工程/技术  研发": {
                    "化工": ["实验室技术员", "化工工程师", "食品/饮料研发", "化妆品研发", "涂料研发", "化工项目经理"],
                    "服装/纺织/皮革": ["服装/纺织/皮革跟单", "打样/制版", "服装/纺织设计", "鞋类设计师", "面料辅料开发", "缝纫工", "样衣工", "量体师", "裁剪工"],
                    "新能源汽车": ["电池工程师", "电机工程师"],
                    "汽车研发/制造": ["车身/造型设计", "汽车电子工程师", "自动驾驶系统工程师", "线束设计", "内外饰设计工程师", "动力系统工程师", "底盘工程师", "汽车零部件设计", "汽车设计", "汽车质量工程师", "总装工程师", "汽车项目管理", "总布置工程师"],
                    "环保": ["EHS工程师", "环境采样/检测员", "环评工程师", "环保工程师", "碳排放管理师"],
                    "其他生产制造职位": ["其他生产制造职位"],
                    "普工/操作工": ["普工/操作工"],
                    "包装工": ["包装工"],
                    "学徒工": ["学徒工"]
                },
                "零售/生活服务  美容美发  保健": {
                    "零售": ["店员/营业员", "收银", "导购", "服装导购", "珠宝销售", "化妆品导购", "家装导购", "理货员", "促销员", "陈列员", "防损员", "门店店长", "储备店长", "督导/巡店", "卖场经理", "商场运营"],
                    "美容美发": ["美容师", "美容店长", "美体师", "美容顾问", "美容导师", "美甲美睫师", "纹绣师", "发型师", "美发助理/学徒", "养发师", "化妆/造型/服装"],
                    "理疗保健": ["理疗师", "产后康复师", "针灸推拿", "按摩师", "足疗师", "采耳师", "营养师/健康管理师", "康复治疗师"],
                    "家政/保洁": ["保洁", "保洁主管", "保姆", "月嫂", "育婴师", "护工", "收纳师"],
                    "安保服务": ["保安", "保安主管/队长", "消防中控员", "押运员", "安检员", "消防维保员"],
                    "维修服务": ["家电维修", "手机维修", "电脑/打印机维修", "电动车/摩托车维修"],
                    "汽车服务": ["汽车维修", "汽车美容", "洗车工", "汽车改装", "汽车服务顾问", "4S店店长/维修站长", "二手车评估师", "汽车查勘定损", "加油员"],
                    "宠物服务": ["宠物美容", "宠物医生"],
                    "运动健身": ["健身教练", "舞蹈老师", "篮球教练", "瑜伽老师", "游泳教练", "跆拳道教练", "武术教练", "轮滑教练", "救生员", "乒乓球教练", "足球教练", "羽毛球教练", "拳击教练", "体育/体能老师"],
                    "驾驶员": ["网约车司机", "代驾司机", "驾校教练", "商务司机", "货运司机", "客运司机", "无人机飞手"],
                    "其他服务业职位": ["花艺师", "婚礼策划", "网吧网管", "会籍顾问", "旅游顾问", "验光师", "摄影/摄像师", "剧本杀主持人", "儿童引导师", "放映员", "游戏陪玩", "其他服务业职位"]
                },
                "餐饮  咖啡师  外卖员": {
                    "前厅": ["服务员", "收银", "礼仪/迎宾/接待", "传菜员"],
                    "后厨": ["餐饮学徒", "厨师", "中餐厨师", "烧烤师傅", "西餐厨师", "日料厨师", "凉菜厨师", "面点师", "后厨配菜打荷", "洗碗工", "水台/水产员"],
                    "餐饮管理": ["餐饮店长", "餐饮前厅经理/领班", "储备店长", "厨师长", "行政总厨", "餐饮督导"],
                    "甜点饮品": ["咖啡师", "茶艺师", "奶茶店店员", "调酒师", "面包/烘焙师", "蛋糕/裱花师"],
                    "其他餐饮岗位": ["送餐员", "外卖运营"]
                },
                "酒店/旅游  酒店前台  导游": {
                    "酒店": ["酒店前台", "礼仪/迎宾/接待", "客房服务员", "酒店经理", "酒店前厅经理", "客房经理", "民宿管家"],
                    "旅游服务": ["旅游顾问", "导游", "旅游产品经理", "讲解员", "计调", "票务员", "签证专员"],
                    "其他旅游职位": ["其他旅游职位"]
                },
                "教育培训  教师  幼少儿教师": {
                    "教师": ["教师", "英语教师", "助教", "数学教师", "语文教师", "高中教师", "初中教师", "小学教师", "家教", "物理教师", "化学教师", "理科教师", "日语教师", "生物教师", "文科教师", "地理教师", "其他外语教师"],
                    "幼少儿教师": ["幼教", "托管老师", "早教老师", "保育员", "感统训练教师"],
                    "教育行政": ["教务管理", "校长/副校长", "班主任/辅导员", "教学管理", "园长/副园长", "就业老师"],
                    "运动健身": ["健身教练", "篮球教练", "跆拳道教练", "武术教练", "轮滑教练", "乒乓球教练", "足球教练", "羽毛球教练", "拳击教练", "台球教练/助教", "游泳教练", "瑜伽老师", "救生员", "普拉提老师", "体育/体能老师"],
                    "文化艺术": ["美术教师", "舞蹈老师", "书法教师", "音乐教师", "播音主持教师", "钢琴教师", "古筝教师", "吉他教师", "表演教师", "架子鼓老师", "围棋老师"],
                    "科学探索培训": ["乐高教师", "机器人教师", "少儿编程老师"],
                    "职业培训": ["培训师", "拓展培训", "IT培训讲师", "财会培训讲师"],
                    "教育产品研发": ["课程设计", "课程编辑", "培训策划", "培训研究", "其他教育产品研发职位"],
                    "教培销售": ["课程顾问", "留学顾问"],
                    "其他教育培训职位": ["其他教育培训职位"]
                },
                "设计  视觉/交互设计  工业设计": {
                    "视觉/交互设计": ["平面设计", "美工", "设计师助理", "UI设计师", "视觉设计师", "广告设计", "UX/交互设计师", "用户研究"],
                    "环境设计": ["室内设计", "软装设计师", "展览/展示设计", "陈列设计", "照明设计", "园林/景观设计", "舞美设计师", "CAD绘图员"],
                    "工业设计": ["家具设计", "工业设计", "包装设计", "珠宝设计", "家具拆单员"],
                    "服装设计": ["服装/纺织设计", "鞋类设计师"],
                    "美术/3D/动画": ["3D设计师", "插画师", "动画设计", "原画师", "漫画师", "修图师"],
                    "游戏设计": ["游戏场景", "游戏角色", "游戏UI设计", "游戏特效", "游戏动作", "游戏主美术"],
                    "高端设计职位": ["设计经理/主管", "设计总监", "视觉设计总监"],
                    "其他设计职位": ["其他设计职位"]
                },
                "房地产/建筑  房地产开发": {
                    "工程管理": ["建筑施工项目经理", "工程造价", "工程监理", "工程咨询", "施工员", "资料员", "材料员", "测绘/测量", "施工安全员", "工程检测员", "工程招投标"],
                    "装饰装修": ["室内设计", "软装设计师", "装修项目经理", "装修监理", "装修造价"],
                    "物业管理": ["物业经理", "物业管理员", "综合维修工", "物业工程主管", "弱电工", "绿化工", "保安", "保安主管/队长", "消防中控员", "消防维保员"],
                    "建筑/规划设计": ["土木/土建/结构工程师", "园林景观设计", "建筑设计师", "建筑工程师", "弱电工程师", "建筑机电工程师", "给排水工程师", "暖通工程师", "幕墙工程师", "BIM工程师", "消防工程师", "水利工程师", "城乡规划设计"],
                    "房地产规划开发": ["房地产项目管理", "房地产策划", "房地产估价师"],
                    "房地产销售/招商": ["置业顾问", "地产中介", "地产招商"],
                    "建筑/装修工人": ["电工", "焊工", "木工", "空调工", "油漆工", "电梯工", "泥瓦工", "水电工"],
                    "其他房地产职位": ["其他房地产职位"]
                },
                "物流/仓储/司机  物流  运输": {
                    "物流/运输": ["物流专员", "物流经理", "物流总监", "物流运营", "物流跟单", "调度员", "运输经理/主管", "跟车员", "水/空/陆运操作", "货代/物流销售", "物流/仓储项目经理", "集装箱管理"],
                    "配送理货": ["配/理/拣/发货", "配送员", "送餐员", "快递员", "搬运工/装卸工", "叉车工", "配送站长"],
                    "驾驶员": ["货运司机", "商务司机", "网约车司机", "代驾司机", "驾校教练", "客运司机", "无人机飞手"],
                    "仓储": ["仓库管理员", "仓库文员", "仓库主管/经理"],
                    "供应链": ["供应链专员", "供应链经理", "供应链总监", "生产计划/物料管理(PMC)"]
                },
                "采购/贸易  外贸经理  海外销售": {
                    "采购": ["采购专员/助理", "采购经理/主管", "采购工程师", "买手", "供应商质量工程师", "商品专员/助理", "商品经理", "采购总监", "招标专员", "投标专员"],
                    "外贸销售": ["外贸业务员", "外贸经理", "海外销售"],
                    "进出口贸易": ["贸易跟单", "单证员", "报关/报检员"],
                    "其他采购/贸易职位": ["其他采购/贸易类职位"]
                },
                "汽车  汽车维修  汽车保养": {
                    "新能源汽车": ["电池工程师", "电机工程师"],
                    "汽车研发/制造": ["车身/造型设计", "汽车电子工程师", "自动驾驶系统工程师", "线束设计", "内外饰设计工程师", "动力系统工程师", "底盘工程师", "汽车零部件设计", "汽车设计", "汽车质量工程师", "总装工程师", "汽车项目管理", "总布置工程师"],
                    "汽车服务": ["汽车维修", "汽车美容", "洗车工", "汽车改装", "汽车服务顾问", "4S店店长/维修站长", "二手车评估师", "汽车查勘定损", "加油员"],
                    "汽车销售": ["汽车销售", "汽车配件销售"]
                },
                "医疗健康  医疗服务  医疗咨询": {
                    "护士/护理": ["护士", "导医", "护士长", "护工"],
                    "医生/医技": ["外科医生", "内科医生", "皮肤科医生", "妇产科医生", "儿科医生", "眼科医生", "精神心理科医生", "整形医生", "全科医生", "耳鼻喉科医生", "医学检验", "放射科医生", "超声科医生", "麻醉科医生", "病理科医生", "医生助理", "中医", "口腔科医生", "幼儿园保健医", "药剂师", "验光师", "医务管理", "其他医生职位"],
                    "理疗保健": ["理疗师", "营养师/健康管理师", "针灸推拿", "康复治疗师", "产后康复师", "心理咨询师", "按摩师", "足疗师", "采耳师"],
                    "药店": ["药店店员", "执业药师/驻店药师", "药店店长"],
                    "生物医药": ["生物学研究人员", "医药研发", "生物信息工程师", "药品生产", "药品注册", "医药项目经理", "细胞培养员", "药理毒理研究员", "药物合成", "制剂研发", "药物分析", "医疗产品技术支持"],
                    "临床试验": ["临床协调员", "临床监查员", "临床项目经理", "临床数据分析", "临床医学经理/专员", "临床医学总监"],
                    "医疗器械": ["医疗器械生产/质量管理", "医疗器械研发", "医疗器械注册", "试剂研发"],
                    "医疗销售": ["医药代表", "医疗器械销售", "医美咨询", "健康顾问", "口腔咨询师"],
                    "其他医疗健康职位": ["医学编辑", "其他医疗健康职位"]
                },
                "金融  保险理赔  金融销售": {
                    "银行": ["柜员", "银行大堂经理", "客户经理", "信贷专员"],
                    "证券/基金/期货": ["证券交易员", "卖方分析师", "买方分析师", "投资银行业务", "基金经理", "柜员", "量化研究员"],
                    "中后台": ["风控", "合规稽查", "资信评估", "清算", "资产评估", "金融产品经理", "催收员"],
                    "投融资": ["投资经理", "投资助理", "行业研究", "融资", "投后管理", "并购", "投资总监/VP", "投资者关系/证券事务代表", "其他投融资职位"],
                    "保险": ["保险理赔", "保险精算师"],
                    "金融销售": ["理财顾问", "保险顾问", "信用卡销售", "证券经纪人"],
                    "其他金融职位": ["其他金融职位"]
                },
                "咨询/翻译/法律  调研  法律咨询": {
                    "咨询/调研": ["知识产权/专利/商标代理人", "项目申报专员", "咨询项目管理", "企业管理咨询", "战略咨询", "财务顾问", "IT咨询顾问", "咨询经理", "人力资源咨询顾问", "猎头顾问", "咨询总监", "市场调研", "数据分析师", "心理咨询师", "婚恋咨询师", "工程咨询", "其他咨询顾问"],
                    "翻译": ["英语翻译", "日语翻译", "韩语/朝鲜语翻译", "俄语翻译", "西班牙语翻译", "德语翻译", "法语翻译", "其他语种翻译"],
                    "法律服务": ["律师助理", "知识产权律师", "律师"],
                    "其他咨询类职位": ["其他咨询/翻译类职位"]
                },
                "能源/环保/农业  能源  矿产开发": {
                    "能源/地质": ["光伏系统工程师", "风电/光伏运维工程师", "水利工程师", "地质工程师"],
                    "环保": ["EHS工程师", "环境采样/检测员", "环评工程师", "环保工程师", "碳排放管理师"],
                    "农/林/牧/渔": ["农业/林业技术员", "饲养员", "养殖技术员", "畜牧兽医"]
                },
                "高级管理  行政助理  行政管理": {
                    "高级管理职位": ["总裁/总经理/CEO", "副总裁/副总经理/VP", "总助/CEO助理/董事长助理", "区域负责人(辖多个分公司)", "分公司/代表处负责人", "董事会秘书", "联合创始人", "高级管理职位"]
                },
                "其他  法律/行政/咨询": {
                    "其他职位类别": ["其他职位"]
                }
            },
            hoveredCategory: {
                name: null,   // 当前悬浮的分类名称
                jobs: null,   // 存储悬浮分类下的岗位数据（默认隐藏）
                detail: ''//右侧详情
            },
            hoverTimer: null, // 定时器
            isHovering: false, // 标志位
            searchForm: {
                content: '',
                location: ''
            },
        }
    },
    methods: {
        // 处理具体职位点击
        handleJobClick(jobName) {
            this.searchForm = { ...this.searchForm, location: this.address, content: jobName };
            this.$router.push({
                name: 'job',
                query: { searchForm: this.searchForm } // 参数会附加在 URL 中
            });
        },
        // 处理分类悬停
        handleMouseEnter(categoryName, categoryData) {
            // 如果已经在悬停状态，或者有未完成的定时器，直接返回
            if (this.isHovering || this.hoverTimer) {
                this.hoveredCategory = {
                    name: '',
                    jobs: '',
                };
                clearTimeout(this.hoverTimer);
                this.hoverTimer = null;
            }

            this.hoverTimer = setTimeout(() => {
                this.isHovering = true;
                this.hoveredCategory = {
                    name: categoryName,
                    jobs: categoryData,
                };
                this.hoverTimer = null; // 重置定时器
            }, 100); // 可调整延迟时间

        },
        handleMouseLeave() {
            // 清除未执行的定时器
            if (this.hoverTimer) {
                clearTimeout(this.hoverTimer);
                this.hoverTimer = null;
            }

            // 只有确实处于悬停状态时才执行离开逻辑
            if (this.isHovering) {
                this.isHovering = false;
                this.hoveredCategory = { name: null, jobs: null };
            }
        },
        // 上一页
        handlePrevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        // 下一页
        handleNextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },
        // 处理子分类点击事件
        handleSubCategoryClick(categoryName) {
            this.searchText = categoryName;
        },
        // 处理上一页点击
        handlePrevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        // 处理下一页点击
        handleNextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },

        // 跳转到职位详情页面
        detail(id) {
            this.$router.push({
                name: 'JobDetail',
                params: { id }
            });
        },
    },
    computed: {
        // 计算总页数
        totalPages() {
            return Math.ceil(Object.keys(this.jobCategories).length / this.pageSize);
        },
        // 获取当前页的分类数据
        currentPageCategories() {
            const categoryEntries = Object.entries(this.jobCategories);
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return categoryEntries.slice(start, end);
        },
        ...mapState({
            userInfo: state => state.seeker.userInfo,
            address: state => state.seeker.address,
        })
    },
    watch: {
        // 监听 address 变化
        address(newVal, oldVal) {
            // newVal 是变化后的新值，oldVal 是变化前的旧值
            // 执行你的处理函数
            this.handleAddressChange(newVal);
        }
    },
}   
</script>

<style scoped>
/* 热门标签相关样式 */
.hot-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    /* 标签间距 */
    margin-top: 8px;
    margin-bottom: 12px;
    margin-left: 10%;
}

.tag-label {
    color: #666;
    font-size: 14px;
    margin-right: 0;
    /* 去掉默认右边距 */
}

.hot-tag {
    cursor: pointer;
    background: #f3f5f7;
    border-radius: 8px;
    color: #026e62;
    font-size: 14px;
    transition: all 0.3s;
}

.hot-tag:hover {
    background-color: #41968d;
    color: white;
}

/* 职位分类容器样式 */
.job-categories {
    padding: 20px;
    background: transparent;
    margin-top: 20px;
}

.categories-container {
    display: flex;
}

/* 左侧分类面板 */
.left-panel {
    flex: 0 0 260px;
    /* 固定左侧宽度 */
    margin-right: 20px;
    padding-top: 20px;

    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    background: #fff;
}

/* 分类卡片样式 */
.category-card {
    position: relative;
    /* 子元素相对定位 */
    margin-bottom: 0;
    /* 增加间距避免遮挡 */
    transition: all 0.3s;
    padding: 0;
    border: none;
    cursor: pointer;
    background: transparent;
}

/* 分类标题容器样式 */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    /* 移除底部间距 */
    width: 250px;
    height: 10px;
}

.category-header h3 {
    margin: 0;
    color: #484646;
    font-size: 15px;
}

/* 右侧详情面板：固定尺寸 + 小窗效果 */
.right-panel {
    flex: 1;
    /* 保持占满剩余宽度 */
    min-width: 500px;
    /* 固定最小宽度 */
    height: 403.2px;
    /* 固定高度（小窗总高度） */
    background-color: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    /* 隐藏容器外内容 */
}

/* 详情内容区域：控制滚动 */
.detail-content {
    height: 100%;
    /* 占满父容器高度 */
    overflow-y: auto;
    /* 垂直溢出时显示滚动条 */
    padding-right: 8px;
    /* 预留滚动条空间，避免内容被遮挡 */
}

/* 美化滚动条 */
.detail-content::-webkit-scrollbar {
    width: 6px;
    /* 滚动条宽度 */
}

.detail-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.detail-content::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* 子分类标签布局优化（避免横向溢出） */
.sub-category-group {
    display: flex;
    align-items: flex-start;
    /* 内容顶部对齐 */
    margin-bottom: 20px;
    /* 增加间距 */
}

/* 左侧分类名称 */
.sub-category-title {
    flex: 0 0 120px;
    /* 固定宽度，占左侧区域 */
    font-weight: bold;
    color: #333;
    text-align: left;
    /* 文字右对齐（与右侧标签对齐） */
    padding-right: 20px;
    /* 与右侧间距 */
}

.sub-category-tag {
    /* 移除按钮相关样式 */
    border: none;
    /* 去掉边框 */
    background: transparent;
    /* 透明背景 */
    padding: 0;
    /* 去掉内边距 */
    margin: 0;
    /* 去掉外边距 */
    font-size: 14px;
    /* 文本大小 */
    cursor: pointer;
    /* 保留点击手势 */
    /* 移除 hover 时的按钮效果，改为文本下划线 */
    transition: all 0.2s;
    color: #6b6868;
}

/* 右侧职位标签容器 */
.sub-category-tags {
    flex: 1;
    /* 占满剩余宽度 */
    display: flex;
    flex-wrap: wrap;
    /* 自动换行 */
    gap: 8px;
    /* 标签间距 */
    color: #026e62;
}

.sub-category-tag:hover {
    background: transparent;
    /* 保持透明背景 */
    color: #009688;
    /*  hover 时加深颜色 */
    text-decoration: underline;
    /* 下划线效果（可选） */
}
</style>